<script setup lang="ts">
import {
  FullScreenContainer,
  BorderBox1,
  BorderBox2,
  BorderBox3,
  BorderBox4,
  BorderBox5,
  BorderBox6,
  BorderBox7,
  BorderBox8,
  BorderBox9,
  BorderBox10,
  BorderBox11,
  BorderBox12,
  BorderBox13,
  Decoration1,
  Decoration2,
  Decoration3,
  Decoration4,
  Decoration5,
  Decoration6,
  Decoration7,
  Decoration8,
  Decoration9,
  Decoration10,
  Decoration11,
  Decoration12,
  PercentPond,
  Charts,
} from "@kjgl77/datav-vue3";
import { reactive } from "vue";
const config = reactive({
  value: 66,
});

const chartOption2 = reactive<any>({
  title: {
    text: "畅销饮料占比饼状图",
  },
  pieStyle: {
    borderRadius: "20%",
  },
  legend: {
    orient: "horizontal",
    data: [{ name: "可口可乐" }],
  },
  series: [
    {
      name: "可口可乐",
      type: "pie",
      data: [
        { name: "可口可乐", value: 93 },
        { name: "百事可乐", value: 32 },
        { name: "哇哈哈", value: 65 },
        { name: "康师傅", value: 44 },
        { name: "统一", value: 52 },
      ],
      radius: ["10%", "50%"],
      insideLabel: {
        show: true,
      },
      roseType: true,
    },
  ],
});
</script>

<template>
  <FullScreenContainer>
    <div class="fullScreen">
      <BorderBox1>
        <div style="margin: 2%; width: 96%; height: 96%">
          <Decoration1 style="width: 7vh; height: 7vh" />
          <Decoration2 style="width: 7vh; height: 7vh" />
          <Decoration3 style="width: 7vh; height: 7vh" />
          <Decoration4 style="width: 7vh; height: 7vh" />
          <Decoration5 style="width: 7vh; height: 7vh" />
          <Decoration6 style="width: 7vh; height: 7vh" />
          <Decoration7 style="width: 7vh; height: 7vh" />
          <Decoration8 style="width: 7vh; height: 7vh" />
          <Decoration9 style="width: 7vh; height: 7vh" />
          <Decoration10 style="width: 7vh; height: 7vh" />
          <Decoration11 style="width: 7vh; height: 7vh" />
          <Decoration12 style="width: 7vh; height: 7vh" />
        </div>
      </BorderBox1>
      <BorderBox2>
        <div style="margin: 2vw">
          <Charts :option="chartOption2" style="width: 30vw; height: 30vw" />
        </div>
      </BorderBox2>
      <BorderBox3>
        <div style="margin: 2vw">
          <PercentPond :config="config" style="width: 200px; height: 100px" />
        </div>
      </BorderBox3>
    </div>
  </FullScreenContainer>
</template>
<style scoped>
.fullScreen {
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: space-around;
  background-color: #0e184b;
}
</style>
